<template>
  <el-dialog
    title="选择会员"
    :visible.sync="dialogData.dialogVisible"
    :modal="false"
    width="800px"
    class="dialogCt"
    @open="openDialog"
    :close-on-click-modal="false"
  >
    <div>
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search" />
          <span>筛选搜索</span>
          <el-button
            style="float:right"
            type="primary"
            size="small"
            @click="handleSearchList()"
          >查询搜索</el-button>
          <el-button
            style="float:right;margin-right: 15px"
            size="small"
            @click="handleResetSearch()"
          >重置</el-button>
          <el-button
            style="float:right;margin-right: 5px"
            size="small"
            @click="handleRefreshList()"
          >刷新</el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="90px">
            <el-form-item label="会员名：">
              <el-input v-model="listQuery.name" class="input-width" />
            </el-form-item>
            <el-form-item label="用户名：">
              <el-input v-model="listQuery.userName" class="input-width" />
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="table-container">
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="tableData"
          style="width: 100%;"
          border
          @select="changeSelect"
          @select-all="changeSelect"
          @row-click="rowClick"
        >
          <el-table-column type="selection" width="60" align="center" />
          <el-table-column label="用户名" align="center">
            <template slot-scope="scope">{{ scope.row.userName }}</template>
          </el-table-column>
          <el-table-column label="会员名" align="center">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.current"
          :page-size="listQuery.size"
          :page-sizes="[5,10,15]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogData.dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleAffirmBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as api from '@/api/member-manage'

const defaultListQuery = {
  current: 1,
  size: 10,
  name: null,
  userName: null
}
export default {
  name: 'SelectUserDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false,
          value: '',
          id: ''
        }
      }
    }
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: true,
      list: null,
      tableData: [],
      total: null,
      operateType: null,
      operateOptions: [],
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /* 重置表单 */
    resetForm() {
      this.list = Object.assign({}, defaultList)
    },
    /* 关闭 */
    closeDialog() {
      this.dialogData.dialogVisible = false
      this.list = Object.assign({}, defaultList)
    },
    /* 打开 */
    openDialog() {
      // if (this.isEdit) {
      this.list = JSON.parse(JSON.stringify(this.dialogData.value))
      // }
    },
    handleRefreshList() {
      this.getList()
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery)
      this.getList()
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    /* 表格复选框改变 */
    changeSelect(selection, row) {
      this.$refs.table.clearSelection()
      if (row) {
        this.$refs.table.toggleRowSelection(row, true)
        this.multipleSelection[0] = row
      } else {
        if (selection.length > 1) {
          this.$message({
            message: '只能单选',
            type: 'warning',
            duration: 3000
          })
          this.$refs.table.toggleRowSelection(selection[0], true)
          this.multipleSelection[0] = selection[0]
        } else if (selection.length == 1) {
          this.$refs.table.toggleRowSelection(selection[0], true)
          this.multipleSelection[0] = selection[0]
        } else if (selection.length == 0) {
          this.multipleSelection = []
        }
      }
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    /* 获取客户列表 */
    getList() {
      this.listLoading = true
      api
        .getMemberList(this.listQuery)
        .then(response => {
          this.listLoading = false
          this.tableData = response.data.records
          this.total = response.data.total
        })
        .catch(error => {
          this.listLoading = false
        })
    },
    /* 点击本行 */
    rowClick(row, event, column) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row, true)
      this.multipleSelection[0] = row
      this.dialogData.dialogVisible = false
      this.$emit('selectSucc', row)
    },
    /* 确定按钮 */
    handleAffirmBtn() {
      if (this.multipleSelection == null || this.multipleSelection.length < 1) {
        this.$message({
          message: '您还没有选择会员',
          type: 'warning',
          duration: 3000
        })
        return
      } else {
        this.dialogData.dialogVisible = false
        this.$emit('selectSucc', this.multipleSelection[0])
      }
    }
  }
}
</script>
<style scoped>
.input-width {
  width: 135px;
}
</style>
